<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button size="mini" v-if="$hasPermission('dept:add')" icon="el-icon-circle-plus-outline"  type="primary" @click="addHandle(dataList)">{{ $t('add') }}</el-button>
        </el-form-item>
		<el-form-item>
		  <el-button size="mini" v-if="$hasPermission('dept:tree')"  icon="el-icon-refresh" type="primary" @click="getDataList()">{{ $t('dept.refresh') }}</el-button>
		</el-form-item>
		<el-form-item>
		  <el-button size="mini"   icon="el-icon-s-operation" type="primary" @click="editShowAll()">{{this.showAllName}}</el-button>
		</el-form-item>
      </el-form>
	  
	  
	  
      <el-table  v-loading="dataListLoading" :data="dataList" v-if="menuTable" :default-expand-all="showAll" row-key="deptId" border style="width: 100%;">
        <el-table-column prop="deptName" :label="$t('dept.name')" header-align="center" min-width="150"></el-table-column>
		<el-table-column prop="deptType" :label="$t('dept.deptType')" header-align="center" align="center" min-width="40px">
		  <template slot-scope="scope">
		    <el-tag  v-if="scope.row.deptType === 1" type="success" size="small">{{ $t('dept.deptType1') }}</el-tag>
		    <el-tag  v-else size="small">{{ $t('dept.deptType0') }}</el-tag>
		  </template>
		</el-table-column>
        <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center" align="center"></el-table-column>
		<el-table-column prop="createTime" :label="$t('dept.createTime')" header-align="center" align="center"></el-table-column>
		<el-table-column prop="status" :label="$t('status')" header-align="center" align="center" min-width="40px">
		  <template slot-scope="scope">
		    <el-tag  v-if="scope.row.status === true" size="small">{{ $t('status1') }}</el-tag>
		    <el-tag  v-else size="small" type="danger">{{ $t('status0') }}</el-tag>
		  </template>
		</el-table-column>
        <el-table-column prop="deptRank" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150" type=index>
          <template slot-scope="scope">
            <el-button v-if="$hasPermission('dept:modify')" type="text" size="small" @click="modifyHandle(scope.row,dataList)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('dept:del')" type="text" size="small" @click="delHandle(scope.row.deptId)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dept-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
		menuTable:true,
		showAll:false,
		showAllName: '展开菜单',
      mixinViewModuleOptions: {
        getDataListURL: '/pc/dept/tree',
        deleteURL: '/pc/dept/del'
      }
    }
  },
  components: {
    AddOrUpdate
  },
  watch: {
      showAll() {
        this.menuTable = false;
        this.$nextTick(() => {
          this.menuTable = true;
        });
      },
    },
	methods:{
	  editShowAll(){
		  this.showAll = !this.showAll;
		  this.showAllName = this.showAll ? '折叠菜单' : '展开菜单'
	  }
	}
}
</script>
